<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>NCAir（软件工程作业）</title>
    <!--<link rel="icon" href="favicon.png" type="image/png">-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./static/css/bootstrap.min.css">
    <link rel="stylesheet" href="./static/css/dashboard.css">
    <link rel="stylesheet" href="./static/css/air.css">
    <script type="text/javascript" src="./static/js/jquery.min.js"></script>
    <script type="text/javascript" src="./static/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="./static/js/vue.min.js"></script>
    <script type="text/javascript" src="./static/js/vue-router.js"></script>

</head>
<body>
<div id="vue_div">
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="./index.html">NCAir .co（软件工程作业）</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"
                           aria-haspopup="true" aria-expanded="false"> {{this.arg}} <span class="badge">0</span> <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <template>
                                <li><a href="#">特价机票<span class="glyphicon glyphicon-fire"></span></a></li>
                                <li><a href="#">我的订单</a></li>
                                <li><a href="#">航空日历</a></li>
                                <li><a href="#">退税中心</a></li>
                                <li><a href="#">系统消息</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="./index.html" >退出登录</a></li>
                            </template>

                        </ul>
                    </li>
                    <li><a href="#" >在线营业厅</a></li>
                    <li><a href="#" >出行指南</a></li>
                    <li><a href="#" >联系客服</a></li>
                </ul>
                <form class="navbar-form navbar-right">
                    <input type="text" class="form-control" placeholder="查询...">
                </form>
            </div>
        </div>
    </nav>
    <!--在这里添加你的东西-->
	<div class="container-fluid">
	<br>
		<div class="row">
			<div class="col-md-6">
				<div class="panel panel-default">
					<div>
						<ul class="nav nav-tabs" role="tablist">
							<h4 style="display:inline-block;margin: 10px;margin-left:20px">机票查询</h4>
							<li role="presentation" style="float:right"><a href="#settings" aria-controls="settings" role="tab"
																		   data-toggle="tab">国际往返</a></li>
							<li role="presentation" style="float:right"><a href="#messages" aria-controls="messages" role="tab"
																		   data-toggle="tab">国际单程</a></li>
							<li role="presentation" style="float:right"><a href="#profile" aria-controls="profile" role="tab"
																		   data-toggle="tab" >国内往返</a></li>
							<li role="presentation" class="active" style="float:right"><a href="#home"
																					   aria-controls="home" role="tab"
																	  data-toggle="tab">国内单程</a></li>



						</ul>
					</div>
					<div class="row">
						<div class="col-md-10 col-md-offset-1 col-xs-10 col-xs-offset-1">
							<form class="form-horizontal" role="form">
								<div class="form-group">
									<label for="leave_spot" class="col-md-2">出发地</label>
									<div class="col-md-10">
										<input type="text" class="form-control" id="leave_spot" placeholder="请输入出发地">
									</div>
								</div>
								<div class="form-group">
									<label for="arrive_spot" class="col-md-2">目的地</label>
									<div class="col-md-10">
										<input type="text" class="form-control" id="arrive_spot" placeholder="请输入目的地">
									</div>
								</div>
								<div class="form-group">
									<label for="leave_time" class="col-md-2">出发日期</label>
									<div class="col-md-10">
										<input type="datetime" class="form-control" id="leave_time" placeholder="请输入出发日期">
									</div>
								</div>
								<div class="form-group">
									<label for="return_time" class="col-md-2">返回日期</label>
									<div class="col-md-10">
										<fieldset disabled>
											<input type="text" class="form-control" id="return_time" placeholder="请输入返回日期" >
										</fieldset>
									</div>
								</div>
								<div class="form-group">
									<div class="col-md-offset-4 col-md-6">
										<button type="submit" class="btn btn-block btn-info">搜索</button>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-6">
				<div class="panel panel-default">
					<div class="panel-heading">检索结果<div class="dropdown" style="float:right;margin-top:-5px">
						<button class="btn dropdown-toggle btn-default btn-sm" id="dropdownMenu1" data-toggle="dropdown">
							排序
							<span class="caret"> </span>
						</button>
						<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
							<li role="presentation">
								<a role="menuitem" tabindex="-1" href="#">时间</a>
							</li>
							<li role="presentation" class="divider"></li>
							<li role="presentation">
								<a role="menuitem" tabindex="-1" href="#">票价</a>
							</li>
							<li role="presentation" class="divider"></li>
							<li role="presentation">
								<a role="menuitem" tabindex="-1" href="#">票余量</a>
							</li>
							<li role="presentation" class="divider"></li>
							<li role="presentation">
								<a role="menuitem" tabindex="-1" href="#">准点率</a>
							</li>
						</ul>
					</div></div>

					<table class="table table-hover table-bordered">
						<tr>
							<th>航班号</th>
							<th>飞行时间</th>
							<th>票价</th>
							<th>准点率</th>
							<th>票余量</th>
							<th>预订</th>
						</tr>
						<tr>
							<td>NS2307</td>
							<td>7:15-9:90</td>
							<td>350起</td>
							<td>99%</td>
							<td>20</td>
							<td>
								<a class="btn btn-success">预订</a>
							</td>
						</tr>
						<tr>
							<td>MU3924</td>
							<td>7:25-9:30</td>
							<td>380起</td>
							<td>98%</td>
							<td>30</td>
							<td>
								<a class="btn btn-success">预订</a>
							</td>
						</tr>
						<tr>
							<td>HU7611</td>
							<td>7:40-10:00</td>
							<td>500起</td>
							<td>92%</td>
							<td>50</td>
							<td>
								<a class="btn btn-success">预订</a>
							</td>
						</tr>
						<tr>
							<td>CA1831</td>
							<td>9:30-11:35</td>
							<td>650起</td>
							<td>97%</td>
							<td>100</td>
							<td>
								<a class="btn btn-success">预订</a>
							</td>
						</tr>
						<tr>
							<td>9C8874</td>
							<td>9:30-12:00</td>
							<td>300起</td>
							<td>80%</td>
							<td>50</td>
							<td>
								<a class="btn btn-success">预订</a>
							</td>
						</tr>
					</table>
				</div>

			</div>
		</div>
		<hr>
		<div class="row">
			<div class="col-md-10 col-md-offset-1" style="border:1px #d6d6d6 solid ;border-radius:10px;">
				<table class="table table-hover" style="margin-top:15px">
					<thead>
					<tr>
						<td>购票日期</td>
						<td>航班号</td>
						<td>出发地</td>
						<td>出发时间</td>
						<td>目的地</td>
						<td>票价</td>
						<td>数量</td>
						<td>状态</td>
						<td>选项</td>
					</tr>
					</thead>
					<tbody>
					<tr>
						<td>2015-9-1</td>
						<td>9C8874</td>
						<td>大连周水子国际机场</td>
						<td>2015-9-5 11:30</td>
						<td>正定国际机场</td>
						<td>290</td>
						<td>1</td>
						<td>已取票</td>
						<td><fieldset disabled><button class="btn btn-warning">退票</button></fieldset></td>
					</tr>
					<tr>
						<td>2017-11-25</td>
						<td>NS2307</td>
						<td>上海浦东机场</td>
						<td>2018-1-1 9:30</td>
						<td>大连周水子国际机场</td>
						<td>500</td>
						<td>3</td>
						<td>未取票</td>
						<td><fieldset disabled><button class="btn btn-info">退票</button></fieldset></td>
					</tr>
					</tbody>
				</table>
			</div>

		</div>
		<transition name="fade">
			<div class="row" v-if="adv" style="position:absolute;left:10%;top:15%;z-index:900;background: rgba(255,255,255,0.9);width:80%;height:500px;border:solid 2px #e0e0e0;border-radius:15px">
				<a href="#" @click="closeadv">
					<div style="border-radius: 50%;width:20px;height:20px;background:#d5403e;position: absolute;z-index: 950;top:2%;left:calc( 100% - 30px);color:white" align="center">
						x
					</div></a>
				<div class="col-md-3" style="display: none;">
					<div id="myCarousel" style="margin:20px;margin-top:50px" class="carousel slide">
						<ol class="carousel-indicators">
							<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
							<li data-target="#myCarousel" data-slide-to="1" ></li>
							<li data-target="#myCarousel" data-slide-to="2"></li>
						</ol>
						<div class="carousel-inner">
							<div class="item active" >
								<img src="static/img/Beijing.jpg" alt="First slide" class="img-rounded">
								<div class="carousel-caption">北京</div>
							</div>
							<div class="item" >
								<img src="static/img/Dalian.jpg" alt="Second slide" class="img-rounded">
								<div class="carousel-caption">大连</div>
							</div>
							<div class="item" >
								<img src="static/img/Shanghai.jpg" alt="Third slide" class="img-rounded">
								<div class="carousel-caption">上海</div>
							</div>
						</div>
						<a class="carousel-control left" href="#myCarousel" data-slide="prev">
							<div style="margin-top:100px;"><</div>
						</a>
						<a class="carousel-control right" href="#myCarousel" data-slide="next" >
							<div style="margin-top:100px;">></div>
						</a>
					</div>
				</div>
				<div class="col-md-9" style="display:none">
					<table class="table table-bordered " style="color:black;font-size: 10px;" >
						<caption>
							<h2><p class="text-center" style="color:black">特价机票</h2>

						</caption>
						<tbody >
						<tr>
							<td>
								<p>
								<h5><span class="glyphicon glyphicon-plane"/>北京——>上海</h5>
								</p>
								<p>
								<h4>200元起</h4>
								</p>
							</td>
							<td>
								<p>
								<h5><span class="glyphicon glyphicon-plane"/>北京——>大连</h5>
								</p>
								<p>
								<h4>150元起</h4>
								</p>
							</td>
							<td>
								<p>
								<h5><span class="glyphicon glyphicon-plane"/>上海——>厦门</h5>
								</p>
								<p>
								<h4>500元起</h4>
								</p>
							</td>
							<td>
								<p>
								<h5><span class="glyphicon glyphicon-plane"/>上海——>云南</h5>
								</p>
								<p>
								<h4>450元起</h4>
								</p>
							</td>
						</tr>
						<tr>
							<td>
								<p>
								<h5><span class="glyphicon glyphicon-plane"/>北京——>名古屋</h5>
								</p>
								<p>
								<h4>800元起</h4>
								</p>
							</td>
							<td>
								<p>
								<h5><span class="glyphicon glyphicon-plane"/>上海——>新加坡</h5>
								</p>
								<p>
								<h4>900元起</h4>
								</p>
							</td>
							<td>
								<p>
								<h5><span class="glyphicon glyphicon-plane"/>北京——>青岛</h5>
								</p>
								<p>
								<h4>200元起</h4>
								</p>
							</td>
							<td>
								<p>
								<h5><span class="glyphicon glyphicon-plane"/>广州——>上海</h5>
								</p>
								<p>
								<h4>280元起</h4>
								</p>
							</td>
						</tr>
						<tr>
							<td>
								<p>
								<h5><span class="glyphicon glyphicon-plane"/>北京——>广州</h5>
								</p>
								<p>
								<h4>700元起</h4>
								</p>
							</td>
							<td>
								<p>
								<h5><span class="glyphicon glyphicon-plane"/>珠海——>上海</h5>
								</p>
								<p>
								<h4>400元起</h4>
								</p>
							</td>
							<td>
								<p>
								<h5><span class="glyphicon glyphicon-plane"/>北京——>海口</h5>
								</p>
								<p>
								<h4>500元起</h4>
								</p>
							</td>
							<td>
								<p>
								<h5><span class="glyphicon glyphicon-plane"/>桂林——>哈尔滨</h5>
								</p>
								<p>
								<h4>800元起</h4>
								</p>
							</td>
						</tr>
						</tbody>
					</table>
				</div>
				<div style="position: absolute;left:2%;top:-5px;"><h3>特价机票</h3></div>
				<div class="col-md-4">
					<div
							style="width:100%;height:400px;box-shadow: 2px 2px 10px #cacaca;border-radius: 5px;margin-top:50px;margin-left:0px;background: white;">
						<div
								style="width:80%;margin:20px;"><img src="static/img/Beijing.jpg" alt=""
																	style="margin-top:20px"></div>
						<div style="margin:20px" align="center">
							<h4><span class="glyphicon glyphicon-plane"/>大连 >  北京</h4>
							<h5>200元起</h5>
						</div>
					</div>
				</div>
				<div class="col-md-4">
					<div
							style="width:100%;height:400px;box-shadow: 2px 2px 10px #cacaca;border-radius: 5px;margin-top:50px;margin-left:0px;background: white;">
						<div
								style="width:80%;margin:20px;"><img src="static/img/Shanghai.jpg" alt=""
																	style="margin-top:20px"></div>
						<div style="margin:20px" align="center">
							<h4><span class="glyphicon glyphicon-plane"/>大连 >  上海</h4>
							<h5>400元起</h5>
						</div>
					</div>
				</div>
				<div class="col-md-4">
					<div
							style="width:100%;height:400px;box-shadow: 2px 2px 10px #cacaca;border-radius: 5px;margin-top:50px;margin-left:0px;background: white;">
						<div
								style="width:80%;margin:20px;"><img src="static/img/Dalian.jpg" alt=""
																	style="margin-top:20px"></div>
						<div style="margin:20px" align="center">
							<h4><span class="glyphicon glyphicon-plane"/>哈尔滨 >  大连</h4>
							<h5>200元起</h5>
						</div>
					</div>
				</div>
			</div>
		</transition>

		<br>
		<div class="row" >
			<marquee width=100% behavior=alternate direction=left align=right>
				<p class="text-primary"><strong>
				海滨城市大连5日游，特价优惠，快带着你的朋友享受这里的美......哈尔滨冰雪大世界，带上你的学生证即可享受5折优惠，时间有限，不要错过
				</strong></p>
			</marquee>
		</div>
		<div class="row" >
				<div class="col-md-3 col-md-offset-9">

						<h4><p class="text-info"><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>客服热线：0311-2874563</p></h4>

				</div>
		</div>
	</div>
</div>
</body>

<script>

        var vm=new Vue({
            el: '#vue_div',
            data:{
                arg:location.search.substring(1).replace('name=',''),
				adv:false
            },
            methods:{
				closeadv:function () {
					this.adv=false;
                }
            },
			created:function(){
                setTimeout("vm._data.adv='true'",2000);
			}
        });


</script>
<style>
	.fade-enter-active, .fade-leave-active {
		transition: opacity .5s
	}
	.fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
		opacity: 0
	}
	.no-mode-translate-fade-enter-active, .no-mode-translate-fade-leave-active {
		transition: all .5s;
	}
	.no-mode-translate-fade-enter, .no-mode-translate-fade-leave-active {
		opacity: 0;
	}
	.no-mode-translate-fade-enter {
		transform: translateY(31px);
	}
	.no-mode-translate-fade-leave-active {
		transform: translateY(-31px);
	}
</style>
</html>